<template>
  <div class='outer'>
    <Tab title="美食">
      <!-- 
        - 使用组件的时候，可以传递插槽，使用v-solt指令在指定的插槽中插入内容
        - v-slot指令只能使用在组件或者<template>上
        - v-slot:center 简写 #center

       -->
      <template #content>
        <img width='200' height="200" />
      </template>
      <template #footer>
        <h1 href="##">111</h1>
      </template>
    </Tab>
    <Tab title="游戏">
      <template #content>
        <ul>
        <li>1</li>
        <li>1</li>
        <li>1</li>
      </ul>
      </template>
      <template #footer>
        <h1>22222</h1>
      </template>
    </Tab>
    <Tab title='电影'>
      <template #content>
        <video width="200" autoplay muted></video>
      </template>
    </Tab>
  </div>
</template>

<script>
import Tab from './components/Tab'

export default {
  name:'App',
  components:{
    Tab
  },
  data() {
    return {
      tabData: [],
    };
  },
}
</script>

<style>
.outer{
  display: flex;
  background:palegreen;
  justify-content: space-around;
  
}
</style>